<template>
  <div class="tpl46-head">

    <section class="modulePadding">
      <!--<if condition="$content['bg63']">background-image:url({$content['bg63']})<else/>background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63bg2.png)</if>;-->

      <div
        v-if="tplItemData.swiper_style && tplItemData.swiper_style == 2"
        class="swiper_bg63 bg2"
        :style="`background-image:url(${tplItemData['bg63']});height:160px;background-repeat:no-repeat;background-size:100% 100%;background-position:center;`">
        <div class="search_goods63">
          <a @click="JumpName('item-class-list')" class="ico_menu"><i></i><span>分类</span></a>
          <div class="search_form">
            <div class="formitem">
              <button type="submit" class="j-search-button btn_sele" @click="searchList"></button>
              <!-- TODO 小程序input处理 -->
              <input type="text" name="title" placeholder="请输入商品名称" v-model="keyword" @confirm="searchList"/>
            </div>
          </div>
          <a @click="JumpName('member')" class="ico_user"><i></i><span>会员</span></a>
        </div>
        <section class="mobile63_headertop">
          <section class="head_pic j-shopLogo"><img :src="tplItemData.avatar" width="100%"></section>
          <section class="head_title"><b class="j-shopTitle"></b></section>
        </section>
      </div>


      <div
        v-else
        class="swiper_bg63" :style="`background-image:url('${swiperBg}');background-repeat:no-repeat;background-size:100% 100%;background-position:center;`">
        <div class="search_goods63">
          <a @click="JumpName('item-class-list')" class="ico_menu"><i></i><span>分类</span></a>
          <div class="search_form">
            <div class="formitem">
              <button type="submit" class="j-search-button btn_sele" @click="searchList"></button>
              <input type="text" name="title" placeholder="请输入商品名称" v-model="keyword" @confirm="searchList"/>
            </div>
          </div>
          <!-- TODO 目前不能跳转外链 先跳转会员 -->
          <!-- <a v-if="$route.query.sid == 8008530" href="http://mall.weifenxiao.com/Public/register/aFGw/H2Hw/sid/8008530.html" class="ico_user ico_user2"><i></i><span>入驻</span></a> -->
          <!-- <a v-else @click="JumpName('member')" class="ico_user"><i></i><span>会员</span></a> -->
          <a @click="JumpName('member')" class="ico_user"><i></i><span>会员</span></a>
        </div>
        <div class="members_flash_box63">
          <section class="members_flash members_flash63 j-swipe" id="Swiper0">
            <ul class="clearfix" v-if="tplItemData.content">
              <!-- TODO 小程序端用swiper -->
              <wx-swiper :style="{height:imgadvWxH}" indicator-color="#fff" indicator-active-color="#ff6a88" :indicator-dots="showIndicators" :autoplay="true" :circular="true">
                <wx-swiper-item v-for="(item,index) in tplItemData.content.dataset" :key="index">
                  <a href="javascript:;" @click="openLink(item.link)">
                    <img class="img swiperImg" :src="item.pic" @load="onImageLoad($event)"/>
                  </a>
                </wx-swiper-item>
              </wx-swiper>
              
            </ul>
          </section>
        </div>
      </div>
    </section>



  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        showIndicators: true,
        imgadvWxH: 0,
        keyword: '',
        shopName: '',
        swiperBg: 'https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63bg.png',
        swiperBg2: 'https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63bg2.png'
      }
    },
    methods: {
      openLink(link) {
        if (link) {
          openPage(link)
        }
      },
      // 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight = event.detail.height
        if(imgHeight > parseFloat(this.imgadvWxH)){
          this.imgadvWxH = imgHeight+'px'
        }
      },
      /**
       * 搜索商品
       */
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      }
    }
  })
</script>

<style lang="scss">
  .tpl46-head{
    // 首页模板63
    .search_goods63{
      text-align: center;
      padding: 20px 10px;
      &>a{
        display: inline-block;
        *display:inline;
        *zoom:1;
        text-align: center;
        color: #fff;
        font-size:24px;
        padding:0 10px;
        margin-top: 8px;
        i{
          display: block;
          height: 34px;
          width:34px;
          margin:0 auto 4px;
          background-repeat:no-repeat;
          background-position:center;
          background-size:contain;
        }
        span{
          font-size: 20px;
        }
        &.ico_menu{
          padding-right: 2%;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63menu.png);
          }
        }
        &.ico_user{
          padding-left: 2%;
          i{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63user.png);
          }
        }
      }
      .search_form{
        display: inline-block;
        background: #fe4150;
        vertical-align: top;
        border:2px solid #fe4150;
        border-radius: 30px;
        width: 74%;
        .btn_sele{
          width: 40px;
          height: 40px;
          border: none;
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63select.png);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 36px 36px;
          float: left;
          margin: 14px 0 0 16px;
          background-color: transparent;
        }
        .input-placeholder {
          color: #fee;
        }
        input{
          width: 80%;
          height: 48px;
          line-height: 48px;
          border: none;
          font-size:28px;
          background: transparent;
          margin-left: -16px;
          color:#fee;
          &::placeholder {
            color:#fee;
          }
        }
      }
    }
    .swiper_bg63{
      &.bg2{
        background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63bg2.png) center no-repeat;
        background-size:100% auto;
        .search_form{
          background:rgba(255,255,255,.3);
          border:2px solid transparent;
          .btn_sele{
            background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63select2.png);
          }
          input{
            color:#000;
            &::-webkit-input-placeholder{    /* WebKit, Blink, Edge */
              color:#333;
            }
            &::-moz-placeholder{    /* Mozilla Firefox 19+ */
              color:#333;
            }
            &:-moz-placeholder{     /* Mozilla Firefox 4 to 18 */
              color:#333;
            }
            &:-ms-input-placeholder{     /* Internet Explorer 10-11 */
              color:#333;
            }
          }
        }
        .mobile63_headertop{
          text-align: center;
          padding: 16px 0 0 0;
          .head_pic{
            display: inline-block;
            width: 100px;
            height: 100px;
            background:#fff;
            border-radius: 50%;
            padding:4px;
            overflow:hidden;
          }
          .head_title{
            margin-top: 12px;
            b{
              font-size:24px;
              font-weight:normal;
              color: #fff;
              word-break: break-all;
              // display: inline-block;
              // background:rgba(0,0,0,0.2);
              // color: #fff;
              // padding:4px 8px;
              // border-radius: 10px;
            }
          }
          img{
            max-width: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    .members_flash_box63{
      margin:6px 3.125% 0;
      .van-swipe__indicators{
        right: 0;
        left:initial;
        .van-swipe__indicator{
          width: 10px;
          height: 10px;
          background: #fff;
          border-radius: 5px;
          &.van-swipe__indicator--active{
            width: 34px;
          }
        }
      }
      ul{
        li{
          overflow:hidden;
          border-radius:8px;
          img{
            border-radius: 16px;
            width: 100%;
          }
        }
      }
    }
    .members_flash_time63{
      bottom:12px;
      padding:0 20px;
      text-align:right;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      span{
        border-radius:10px;
        background:#fff;
        &.cur{
          width:34px;
          background:#ff6a88;
        }
      }
    }
    .hotgoods63{
      .hotgoods_item{
        float:left;
        width:50%;
        &:last-child{
          width:50%;
          border-left:2px solid #e5e5e5;
          -moz-box-sizing:border-box;
          -webkit-box-sizing:border-box;
          box-sizing:border-box;

        }
        .item_title{
          padding:10px;
          font-size:22px;
          color:#999;
        }
        .hotgoods_info{
          float:left;
          width:50%;
          img{
            display:block;
            max-width:100%;
            // height:100%;
            margin:0 auto;
          }
          .hotgoods_title{
            padding:20px 0;
            font-size:24px;
            text-align:center;
            color:#fe083f;
          }
        }
      }
    }
    .hybird63{
      overflow:hidden;
      border-radius:12px;
      .header_img{
        img{
          display:block;
          width:100%;
        }
      }
      .goods_info{
        position:relative;
        padding:30px 0 20px;
        background:#fff;
        .triangle{
          position:absolute;
          top:-32px;
          left:50%;
          margin-left:-16px;
          width:0;
          height:0;
          border:16px solid transparent;
          border-bottom-color:#fff;
        }
      }
      .goods_item{
        float:left;
        width:21%;
        margin:0 2%;
        img{
          display:block;
          width:100%;
        }
        .item_txt{
          margin-top:16px;
          font-size:24px;
          color:#333;
        }
      }
    }
  }
  .swiperImg{
    border-radius: 16px;
  }
</style>
